<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时客流统计</title>
<script src="echarts.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
	title: {
		text: '实时客流统计'
	},
	tooltip: {
		trigger: 'axis',
		formatter: function (params) {
			params = params[0];
			var date = params.data[0];
			return date.toLocaleString() + ' : ' + params.value[1];
		}
	},
	dataZoom: [
		{
			type: 'slider',
			xAxisIndex: [0]
		},
		{
			type: 'inside',
			xAxisIndex: [0]
		}
	],
	xAxis: {
		type: 'time',
		splitLine: {
			show: false
		}
	},
	yAxis: {
		type: 'value',
		boundaryGap: [0, '100%'],
		splitLine: {
			show: false
		}
	},
	series: [{
		name: '模拟数据',
		type: 'line',
		showSymbol: false,
		data: []
	}]
};
var data = [];
myChart.setOption(option);
interval = setInterval(function(){
	$.get('http://127.0.0.1:5000/count', function(result){
		if (data.length === 0) {
			var now = new Date()
			var value = result;
			for (var i = 1; i <= 360; i++) {
				value = value - Math.random() * 201 + 100
				data.unshift([new Date(now-i*1000), parseInt(value)]);
			}
		}
		data.push([new Date(), result]);
		myChart.setOption({
			series: [{
				data: data
			}]
		});
	}, 'json');
}, 1000);
</script>
</body>
</html>